<template>
  <div class="box">
    <MyHeader color="#fff" bgColor="#1d7bff">tabbar案例</MyHeader>
    <keep-alive>
      <component :is="activeName"></component>
    </keep-alive>
    <MyFooter :Footerlist="Footerlist" v-model="active"></MyFooter>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyFooter from './components/MyFooter'
import MyGoodsList from './components/MyGoodsList'
import MySearch from './components/MySearch'
import MyUseInfo from './components/MyUseInfo'
export default {
  components: {
    MyHeader,
    MyFooter,
    MyGoodsList,
    MySearch,
    MyUseInfo,
  },
  data() {
    return {
      Footerlist: [
        {
          id: 1,
          icon: 'iconfont icon-shangpinliebiao',
          title: '商品列表',
          name: 'MyGoodsList',
        },
        {
          id: 2,
          icon: 'iconfont icon-sousuo',
          title: '商品搜索',
          name: 'MySearch',
        },
        {
          id: 3,
          icon: 'iconfont icon-user',
          title: '用户信息',
          name: 'MyUseInfo',
        },
      ],
      active: 1,
    }
  },
  methods: {
    CurrentFn(id) {
      this.active = id
    },
  },
  computed: {
    activeName() {
      return this.Footerlist.find((item) => item.id == this.active).name
    },
  },
}
</script>

<style lang="less" scoped>
.box {
  padding-top: 50px;
  padding-bottom: 50px;
}
</style>
